<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">   
<h:head/>      
<h:body>
    <ui:composition>
    
    

	<div class="thumbnail effects clearfix" id="effect-6">
	    <div class="img">
	        <p:graphicImage library="images" name="Products/MacBookAir.jpg" style="margin:0"/>
	        <div class="overlay"> 
		        <h:link outcome="viewProduct" styleClass="expand">
		            <span class="fa fa-plus"></span>
				</h:link>
	            <a class="close-overlay hidden">x</a>
	        </div>
	    </div>
	    <div class="clearfix"></div>
	    <div class="caption">
	        <h3>Un título</h3>
	          <p class="text-muted clearfix">
	            <small class="pull-left">
	                <i class="fa fa-dot-circle-o"></i> Categoria
	            </small>
	            <small class="pull-right">
	                <i class="fa fa-eye"></i> 35
	            </small>
	        </p>
	        <h4 class="text-warning">S/. 205.00</h4>
	        <hr />
	        <form>
		        <div class="form-group">
                    <h:link outcome="viewProduct" styleClass="btn btn-default" value="Ver">
	                    <f:param name="codigo" value="1"/>
	                </h:link>
		            <input type="hidden" name="cartCant" value="1" class="form-control" />
		            <input type="submit" class="btn btn-danger" value="Añadir al carrito" />                                   
		        </div>
		    </form>
	    </div>
	</div>
    
    <script type="text/javascript">
    $(function () {
        if (Modernizr.touch) {
            // show the close overlay button
            $(".close-overlay").removeClass("hidden");
            // handle the adding of hover class when clicked
            $(".img").click(function(e){
                if (!$(this).hasClass("hover")) {
                    $(this).addClass("hover");
                }
            });
            // handle the closing of the overlay
            $(".close-overlay").click(function(e){
                e.preventDefault();
                e.stopPropagation();
                if ($(this).closest(".img").hasClass("hover")) {
                    $(this).closest(".img").removeClass("hover");
                }
            });
        } else {
            // handle the mouseenter functionality
            $(".img").mouseenter(function(){
                $(this).addClass("hover");
            })
            // handle the mouseleave functionality
            .mouseleave(function(){
                $(this).removeClass("hover");
            });
        }
    });
    </script>
	
    </ui:composition>
</h:body>
</html>